<template>
  <div class="ms-list">
    <el-row class="operation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <icon style="" name="home"></icon>
        </el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>问卷管理</el-breadcrumb-item>
        <el-breadcrumb-item>问卷</el-breadcrumb-item>
        <el-breadcrumb-item>列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <ms-slide
      :width="500"
      ref="slidePreviewQuestionnaire">
      <div class="preview-box">
        <div class="preview-main">
          <div class="preview-bg">
            <img :src="previewImg" alt="">
          </div>
          <div class="exist">
            <header>
              <div class="title">
                {{ questionTitle }}
              </div>
            </header>
            <div class="content">
              <p class="explain">说明：</p>
              <div class="container explain-centent">{{ questionExplain }}</div>
              <div class="container">
                <p class="text-box">姓名：<input type="text" class="text border"></p>
                <p class="text-box">电话：<input type="text" class="text border"></p>
              </div>

            </div>
            <div class="content">
              <div class="questions">
                <ul class="question-box question">
                  <li v-for="(item, index) in questionList" class="question">
                    <p class="topic">
                      {{index + 1}}. {{item.questions}}&nbsp;
                    </p>
                    <el-radio-group v-if="item.typeId === 1" v-model="item.value">
                      <p v-for="radio in item.answer" class="radio">
                        <el-radio :label="radio.label" :key="radio.value">
                      <span class="text">
                        {{radio.value}} &nbsp;
                      </span>
                        </el-radio>
                      </p>
                    </el-radio-group>
                    <el-checkbox-group v-else-if="item.typeId === 2" v-model="item.value">
                      <p v-for="(option, index) in item.answer">
                        <el-checkbox :label="option.value">
                    <span class="text">
                    {{option.value}} &nbsp;
                    </span>
                        </el-checkbox>
                      </p>
                    </el-checkbox-group>
                    <div v-if="item.typeId === 3" class="textarea">
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="item.value">
                      </el-input>
                    </div>
                    <div class="NPS-answer" v-else-if="item.typeId === 4">
                      <el-radio-group v-model="item.value">
                        <el-radio-button v-for="radio in item.answer" :label="radio" :key="radio"></el-radio-button>
                      </el-radio-group>
                      <div v-if="item.value !== ''" class="textarea nsp">
                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 5}"
                          placeholder="请输入内容"
                          v-model="item.suggest">
                        </el-input>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="footer">
              <el-button @click="closePreview()">提交</el-button>
            </div>
          </div>
        </div>
      </div>
    </ms-slide>

    <div ref="msSearch">
      <!--@clickH="calculatedHeight"-->
      <ms-search :data="search.list" @click="updateConditions"/>
    </div>

    <el-table
      v-loading="table.loading"
      size="small"
      stripe border
      :data="table.list"

      :fit="true">
      <el-table-column label="问卷ID" prop="id" min-width="80"></el-table-column>
      <el-table-column label="问卷题目" prop="title" min-width="250"></el-table-column>
      <el-table-column label="填写量" prop="fill" min-width="80"></el-table-column>
      <el-table-column label="浏览量" prop="browse" min-width="80"></el-table-column>
      <el-table-column label="问题个数" prop="questionNum" min-width="40"></el-table-column>
      <el-table-column label="链接地址" min-width="50">
        <template slot-scope="scope">
          <el-popover
            ref="popover"
            placement="top"
            trigger="click">
            <a href="javascript:" target="_blank">{{ generateUrl(scope.row.key) }}</a>
          </el-popover>
          <el-button type="text" v-popover:popover @click="getKey(scope.$index)">
            <icon name="anchor" class="ms-icon-btn"/>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="creatorName" min-width="80"></el-table-column>
      <el-table-column label="创建时间" prop="creatorTime" min-width="140"></el-table-column>
      <el-table-column label="操作" min-width="140">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click.native.prevent="view(scope.row.id)">查看</el-button>
          <router-link v-if="scope.row.fill === 0"
                       :to="{path:'/survey/questionnaire-survey-new/',query:{surveyId:scope.row.id}}">编辑
          </router-link>
          <ms-confirm-button v-if="scope.row.fill === 0" title="删除" @confirm="deleteRow(scope.$index)">
            <p>您确定要删除该问卷？</p>
          </ms-confirm-button>
          <router-link v-if="scope.row.fill !== 0"
                       :to="{path:'/survey/data-statistic-pie/',query:{surveyId:scope.row.id,title:scope.row.title }}">
            数据统计
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="table.pagination.page"
      :total="table.pagination.totalRow"
      :page-size="table.pagination.pageSize"
      :page-sizes="table.pagination.pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
  import MsSearch from '@/components/common/Search.vue'
  import MsSlide from '@/components/common/Slide.vue'
  import MsConfirmButton from '@/components/common/ConfirmButton.vue'
  import Api from '@/api/customer/platform/data-statistic'
  import SurveyApi from '@/api/customer/platform/client-survey'
  import { SEARCH_CONDITION } from '@/models/customer/platform/data-statistic'
  import ResponseParse from '@/utils/response-parse'

  export default {
    components: {
      MsSearch,
      MsSlide,
      MsConfirmButton
    },
    created () {
      this.search.list = SEARCH_CONDITION
      this.table.list = []
      this.requestList()
    },
    data () {
      return {
        search: {
          list: [],
          condition: {}
        },
        table: {
          loading: true,
          list: [],
          pagination: {}
        },
        questionList: [],
        questionTitle: '',
        questionExplain: '',
        previewImg: ''
//        PHeigh: document.documentElement.clientHeight - 120,
//        tbHeight: 100
      }
    },
//    mounted: function () {
//      this.$nextTick(function () { this.$set(this, 'tbHeight', this.PHeigh - this.$refs.msSearch.clientHeight) })
//    },
    methods: {
      searchCriteria (val, index) {
        this.$set(this.search.list[index], 'value', val)
      },
//      calculatedHeight () {
//        this.$nextTick(function () {
//          this.$set(this, 'tbHeight', this.PHeigh - this.$refs.msSearch.clientHeight)
//        })
//      },
      requestList () {
        this.table.loading = true
        const search = Object.assign({}, this.table.pagination, this.search.condition)
        Api.list({search: search}, response => {
          let status = response.status || 0
          let body = response.data || []
          if (status === 200 || status === 204) {
            this.table.list = body
            this.table.pagination = ResponseParse.pagination(response.headers)
//            if (this.table.pagination.totalPage === this.table.pagination.page) {
//              this.tbHeight = ''
//            } else {
//              this.$set(this, 'tbHeight', this.PHeigh - this.$refs.msSearch.clientHeight)
//            }
          } else {
//            this.tbHeight = ''
            this.table.list = []
            this.$message.error(body.error || '数据获取失败')
          }
          this.table.loading = false
        })
      },
      deleteRow (index) {
        SurveyApi.delete({id: this.table.list[index].id}, response => {
          let status = response.status || 0
          let body = response.data || []
          if (status >= 200 && status <= 204) {
            this.table.list.splice(index, 1)
            this.$message.success('删除成功')
          } else {
            this.$message.error(body.error || '删除失败')
          }
        })
      },
      view (id) {
        SurveyApi.get({id: id}, response => {
          let status = response.status || 0
          let body = response.data || {}
          if (status >= 200 && status <= 204) {
            this.questionList = []
            for (let key in body.map.question) {
              let question = {}
              question.questions = key.split('-')[0]
              question.typeId = parseInt(key.split('-')[1])
              switch (question.typeId) {
                case 1:
                  question.answer = []
                  let i = 0
                  body.map.question[key].forEach(item => {
                    question.answer.push({label: i++, value: item, show: true})
                  })
                  question.value = ''
                  break
                case 2:
                  question.answer = []
                  body.map.question[key].forEach(item => {
                    question.answer.push({value: item, show: true})
                  })
                  question.value = []
                  break
                case 3:
                  question.answer = ''
                  question.value = ''
                  break
                default:
                  question.answer = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
                  question.value = ''
                  break
              }
              this.questionList.push(question)
            }
            this.questionTitle = body.map.survey.title
            this.questionExplain = body.map.survey.summary
            if (body.map.templet !== undefined) {
              this.previewImg = body.map.templet.imageAddress
            } else {
              this.previewImg = ''
            }
            this.showSlide('slidePreviewQuestionnaire')
          } else {
            this.$message.error(body.error || '数据获取失败')
          }
        })
      },
      handleSizeChange (val) {
        this.table.pagination.pageSize = val
        this.requestList()
      },
      handleCurrentChange (val) {
        this.table.pagination.page = val
        this.requestList()
      },
      updateConditions (conditions) {
        this.table.pagination.page = 1
        this.search.condition = conditions
        this.requestList()
      },
      showSlide (ref) {
        this.$refs[ref].show()
      },
      closePreview () {
        this.$refs['slidePreviewQuestionnaire'].close()
      },
      getKey (index) {
        if (this.table.list[index].url === undefined) {
          Api.getKey({id: this.table.list[index].id}, response => {
            let status = response.status || 0
            let body = response.data || []
            if (status === 200 || status === 204) {
              this.$set(this.table.list[index], 'key', body.map.key)
            } else {
              this.$message.error(body.error || '获取key失败')
            }
          })
        }
      },
      generateUrl (key) {
        let domainHost = window.location.host
        return 'http://' + domainHost + '/static/customer/platform/clientSurvey/index.html?key=' + key
      }
    }
  }
</script>

<style lang="scss" scoped>

  ul {
    list-style: none;
  }

  .text:hover {
    .title-icon {
      display: inline-block;
    }
  }

  .text {
    .title-icon {
      display: none;
    }
  }

  .question-icon {
    i {
      display: none;
    }
  }

  .b-button {
    margin-left: 142px;
  }

  .question:hover {
    .question-icon {
      i {
        display: inline-block;
      }
    }
  }

  .preview-box {
    .preview-main {
      width: 414px;
      margin: 0 auto;
      overflow: hidden;
      .preview-bg {
        width: 414px;
        position: fixed;
        z-index: -1;
        top: 45px;
        overflow: hidden;
      }
      .exist {
        .content {
          .explain-centent {
            margin: 0;
            line-height: 14px;
          }
          .questions {
            margin-top: -10px;
            .question-box {
              li {
                .text {
                  line-height: 43px;
                }
                .el-radio-group {
                  .el-radio-button__inner {
                    padding: 6px 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

</style>
<style lang="scss" scoped>
  input, textarea {
    outline: none;
    border: none;
    vertical-align: middle;
  }

  input::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  textarea {
    resize: none;
  }

  input:focus, textarea:focus {
    border: 1px solid #51A2E4 !important;
  }

  .preview-main {
    width: 100%;
    height: 100%;
    header {
      width: auto;
      background-color: rgba(255, 255, 255, 0.95);
      border: solid 2px #d62822;
      margin: 15px 10px;
      padding: 0px 10px 5px;
      box-shadow: 0 0 5px #cccccc;
      text-align: center;
      .title {
        position: relative;
        display: inline-block;
        font: normal bold 22px / 55px arial, verdana;
      }
    }
    .content {
      p {
        margin: 0;
      }
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 5px #cccccc;
      margin: 10px 10px;
      padding: 30px 10px;
      font-size: 14px;
      .explain {
        font-size: 16px;
      }
      .container {
        margin: 5px 0;
        .text-box {
          padding-top: 10px;
          .text {
            padding: 0 8px;
          }
          .border {
            display: inline-block;
            width: 80%;
            border: 1px solid #d5d5d5;
          }
          input {
            height: 28px;
          }
        }
      }
      .explain-centent {
        display: inline-block;
        position: relative;
      }
      .explain-centent::before {
        position: absolute;
        content: '';
        bottom: -6px;
        width: 100%;
        height: 3px;
        background: -webkit-linear-gradient(315deg, transparent, transparent 45%, #409eff, transparent 55%, transparent 100%), -webkit-linear-gradient(45deg, transparent, transparent 45%, #409eff, transparent 55%, transparent 100%);
        background: linear-gradient(135deg, transparent, transparent 45%, #409eff, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, #409eff, transparent 55%, transparent 100%);
        background-size: 6px 6px;
        background-repeat: repeat-x, repeat-x;
      }
      .questions {
        .question {
          padding: 0;
          margin: 0;
          .topic {
            margin-top: 10px;
          }
        }
      }
    }
    .footer {
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0 5px #cccccc;
      margin: 10px 10px;
      button {
        width: 100%;
        margin: 0 auto;
        background-color: rgba(255, 255, 255, .5);
      }
      button::after {
        font-size: 18px;
        border: 1PX solid #666666;
      }
    }
  }
</style>
<style lang="scss">
  .preview-box {
    .preview-main {
      .exist {
        .content {
          .questions {
            .question-box {
              li {
                .NPS-answer {
                  .el-radio-group {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    .el-radio-button {
                      width: 100%;
                      .el-radio-button__inner {
                        width: 100%;
                        padding: 6px 0;
                        text-align: center;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
